.vertical-title {
	color: #cdced9;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	margin-top: 250px;
	text-transform: uppercase;
	transform: rotate(-90deg);
}

.home {
	.font-weight-bold {
		font-weight: 900 !important;
	}

	.card {
		border-radius: 12px;
		box-shadow: 4px 6px 36px rgba(48, 49, 63, 0.15);
		margin-bottom: 32px;
		min-height: 100%;
		transition: all 0.4s;

		.learn-more {
			color: #d2d3dd;
			display: inline-flex;
			font-size: 15px;
			font-weight: bold;
		}

		&:hover {
			background-color: #fff6f5;
			box-shadow: 6px 9px 36px rgba(48, 49, 63, 0.2);
			transform: translateY(-4px);

			.learn-more {
				color: $brand-dark;
			}
		}

		h2 {
			color: #393a4a;
			font-size: 21px;
			line-height: 1.6;
			margin-bottom: 16px;
		}

		.btn {
			color: #393a4a;
			font-size: 11px;
			letter-spacing: 1.5px;
		}

		p {
			color: #d0b8b9;
			font-size: 18px;
			line-height: 1.6;
			margin-bottom: 16px;

			@include media-breakpoint-up(sm) {
				margin-bottom: 32px;
			}
		}

		img.mx-auto {
			margin: 32px 0 40px;
			width: 98px;
		}
	}
}

.intro {
	background-size: auto;
	color: $brand-light;
	margin-bottom: 32px;
	padding: 88px 0;

	@include media-breakpoint-up(sm) {
		padding: 103px 0 116px;
	}

	.brand {
		display: inline-block;
		margin-bottom: 43px;

		.logo {
			max-height: 84px;
			margin-right: 22px;

			@include media-breakpoint-down(md) {
				max-width: 60px;
			}
		}

		.title {
			font-size: 84px;
			font-weight: 700;
			color: $brand-dark;

			@include media-breakpoint-down(md) {
				font-size: 60px;
			}
		}

		&:hover {
			text-decoration: none;
		}
	}

	.h1 {
		font-size: 36px;
		font-weight: 900;
		line-height: 1;
		margin: 52px 0 24px;
		word-break: normal;

		@include media-breakpoint-up(sm) {
			font-size: 64px;
		}

		@include media-breakpoint-up(lg) {
			font-size: 96px;
			margin-bottom: 48px;
		}
	}

	.h2 {
		color: $brand-lighter;
		font-size: 36px;
		font-weight: 600;
		line-height: 57px;

		@include media-breakpoint-up(lg) {
			font-size: 48px;
			margin-bottom: 73px;
		}

		@include media-breakpoint-down(md) {
			font-size: 31px;
			line-height: 43px;
			margin-bottom: 40px;
		}
	}

	.h3 {
		color: rgba(255, 255, 255, 0.6);
		font-size: 18px;
		font-weight: 700;
		letter-spacing: 4px;
		line-height: 1.7;
		margin-bottom: 56px;

		@include media-breakpoint-up(sm) {
			font-size: 28px;
			letter-spacing: 0.4px;
			margin-bottom: 72px;
		}
	}
}

.btn-warning-borderless {
	color: $brand-lighter;

	&:hover {
		color: $brand-lighter;
	}
}

.btn-borderless {
	border: 1px solid $brand-lighter;
}

.btn-brand-color {
	color: $brand-dark;

	&:hover {
		color: $brand-lighter;
	}
}

.title-section {
	font-size: 32px;
	color: $brand-dark;
	font-weight: 700;
	margin-bottom: 43px;

	svg {
		font-size: 42px;
		margin-right: 28px;
	}

	@include media-breakpoint-down(md) {
		font-size: 28px;

		svg {
			font-size: 36px;
		}
	}
}

.title-section.orange {
	color: #f7caa7;
}

.title-section ~ .version-section {
	margin-bottom: 26px;
}

.subtitle-section {
	color: $brand-bg-dark;
	font-size: 20px;
	font-weight: 400;
	margin: 0;

	@include media-breakpoint-down(md) {
		font-size: 18px;
	}
}

.version-section {
	color: $text-color;
	font-size: 24px;
	font-weight: 500;
}

.code-shell {
	color: $text-color;
	display: inline-block;
	font-size: 18px;
	font-weight: 600;
}

.spacing {
	padding: 141px 20px;
}

.warning {
	background: url(/images/css_illustration.svg) $brand-lighter;
	background-size: cover;

	.spacing {
		background-color: $brand-lighter;
	}
	.subtitle-section {
		color: #fff4ec;
		margin-bottom: 61px;
	}

	.btn-borderless {
		border-color: #fff4ec;
	}

	.btn-warning-borderless {
		color: #fff4ec;
	}

	.btn-brand-color {
		color: #fff4ec;
	}
}

.components {
	.subtitle-section {
		margin-bottom: 61px;
	}

	img {
		margin-bottom: 30px;
	}
}

.css {
	.title-section {
		margin-bottom: 20px;
	}

	.subtitle-section {
		margin-bottom: 44px;
	}

	.code-shell {
		margin-bottom: 46px;
	}
}

.css {
	&::before {
		background-color: $brand-bg-dark-lighter;
		content: '';
		display: block;
		height: 2px;
		margin-left: auto;
		margin-right: auto;
		width: 300px;

		@include media-breakpoint-down(md) {
			width: 200px;
		}
	}

	.container-fluid {
		@include media-breakpoint-down(md) {
			text-align: center !important;
		}
	}
}

.contribute {
	background-image: url(/images/home/patternbg.svg);
	background-position: 80%;
	background-repeat: no-repeat;
	background-size: 130%;
	color: $white;
	padding: 80px 0;

	@include media-breakpoint-up(md) {
		padding: 153px 0;
	}

	h2 {
		font-size: 40px;
		font-weight: 700;
		margin-bottom: 34px;
	}

	p {
		font-size: 24px;
		font-weight: 600;
		line-height: 1.4;
		margin-bottom: 23px;
	}

	.container-fluid {
		@include media-breakpoint-down(md) {
			text-align: center !important;
		}
	}
}

.link-blocks {
	color: $brand-light;
	padding: 80px 0;

	@include media-breakpoint-up(sm) {
		padding: 128px 0;
	}

	.card {
		background-color: darken($brand-lighter, 10%);
		border-width: 0;
		box-shadow: 4px 6px 24px rgba(30, 31, 39, 0.3);

		&:hover {
			background-color: $brand-lighter;

			a {
				color: $white;
			}
		}

		img.mx-auto {
			height: 60px;
			margin: 32px 0 40px;
		}

		a {
			color: #d2d3dd;
			font-weight: bold;
		}
	}
}
